<template>
  <!-- 用户管理主容器：包含整个用户管理页面的所有内容 -->
  <div class="user-management-container">
    <!-- 搜索栏：用于根据姓名或手机号搜索用户 -->
    <div class="search-container">
      <el-input
        v-model="searchForm.keyword"
        placeholder="姓名/手机号"
        class="search-input"
        prefix-icon="el-icon-search"
        clearable
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
      <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
    </div>

    <!-- 操作按钮区域：包含添加用户等功能按钮 -->
    <div class="operation-container">
      <el-button type="primary" icon="el-icon-plus" @click="goToRegister">新增员工</el-button>
    </div>

    <!-- 表格区域：显示用户数据的主要内容区 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        stripe
        highlight-current-row
        style="width: 100%"
        v-loading="loading"
        :header-cell-style="{backgroundColor: '#f5f7fa', color: '#606266', fontWeight: 'bold'}"
        height="500px"
        :row-style="{height: '48px'}"
        :cell-style="{padding: '0 8px'}"
      >
        <!-- 序号列：固定在左侧 -->
        <el-table-column type="index" width="60" align="center" fixed></el-table-column>
        <!-- 用户姓名列：固定在左侧 -->
        <el-table-column prop="username" label="姓名" width="120" fixed></el-table-column>
        <!-- 账号列 -->
        <el-table-column prop="account" label="账号" width="180"></el-table-column>
        <!-- 手机号列 -->
        <el-table-column prop="phone" label="手机" width="200"></el-table-column>
        <!-- 邮箱列 -->
        <el-table-column prop="email" label="邮箱" width="210"></el-table-column>
        <!-- 创建时间列 -->
        <el-table-column prop="createTime" label="创号时间" width="240"></el-table-column>
        <!-- 最后登录时间列 -->
        <el-table-column prop="loginTime" label="最后登录时间" width="240"></el-table-column>
        <!-- 角色列：使用不同颜色的标签来区分角色类型 -->
        <el-table-column label="角色" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.roleId === 1 ? 'danger' : 'primary'" size="medium">
              {{ scope.row.roleId === 1 ? '管理员' : '物业' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 账号状态列：使用不同颜色的标签来显示账号状态 -->
        <el-table-column prop="status" label="账号状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '正常' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作列：包含停用/启用和删除按钮 -->
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :class="scope.row.status === 1 ? 'warning-text' : 'success-text'"
              @click="handleStatusChange(scope.row)"
            >
              {{ scope.row.status === 1 ? '停用' : '启用' }}
            </el-button>
            <el-button
              size="mini"
              type="text"
              style="color: #F56C6C;"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器：控制表格的分页显示 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[3, 20, 30, 50]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>

    
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'UserManagement',
  data() {
    return {
      // 控制表格加载状态的标志
      loading: false,
      // 搜索表单数据，存储搜索关键词
      searchForm: {
        keyword: ''
      },
      // 表格数据，存储员工列表
      tableData: [],
      // 分页设置，控制分页器的行为
      pagination: {
        currentPage: 1, // 当前页码
        pageSize: 3,    // 每页显示条数
        total: 0        // 总记录数
      }
    }
  },
  // 生命周期钩子：组件创建时加载员工列表数据
  created() {
    this.getEmployeeList()
  },
  methods: {
    /**
     * 跳转到注册页面
     * 用于添加新员工时导航到注册界面
     */
    goToRegister() {
      this.$router.push('/register')
    },
    
    /**
     * 获取员工列表数据
     * 从后端API获取员工数据并更新表格
     * 支持分页和搜索功能
     */
    async getEmployeeList() {
      // 显示加载状态
      this.loading = true
      // 构建请求参数
      const params = {
        pageNum: this.pagination.currentPage, // 当前页码
        pageSize: this.pagination.pageSize,   // 每页条数
        param: this.searchForm.keyword        // 搜索关键词
      }
      // 发送请求获取员工数据
      const response = await this.$axios.post('/api/uums-server/user/getUser',params);
      if(response.data.code===200){
        // 请求成功，更新表格数据和总记录数
        this.tableData = response.data.data.list // 使用分页数据列表
        this.pagination.total = response.data.data.total // 更新总记录数
        
      }else{
        // 请求失败，显示错误信息
        this.$message.error(data.message || '获取数据失败')
      }
      // 隐藏加载状态
      this.loading=false;
      
    },
    
    /**
     * 处理搜索按钮点击事件
     * 重置页码并重新加载数据
     */
    handleSearch() {
      this.pagination.currentPage = 1 // 重置为第一页
      this.getEmployeeList() // 重新加载数据
    },
    
    /**
     * 处理重置按钮点击事件
     * 清空搜索条件并重新加载数据
     */
    handleReset() {
      this.searchForm.keyword = '' // 清空搜索关键词
      this.handleSearch() // 调用搜索方法重新加载数据
    },
    
    /**
     * 处理账号状态变更（停用/启用）
     * 显示确认对话框并更改用户状态
     * @param {Object} row - 当前操作的行数据对象
     */
    handleStatusChange(row) {
      const isDisable = row.status === 1 // 判断当前是否为启用状态
      const statusText = isDisable ? '停用' : '启用' // 根据当前状态设置操作文本
      
      // 显示确认对话框
      this.$confirm(`确认${statusText}该员工吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认后更新状态（这里是模拟，实际应调用API）
        row.status = isDisable ? 0 : 1
        this.$message.success(`${statusText}成功`)
      }).catch(() => {
        // 用户取消操作，不做任何处理
      })
    },
    
    /**
     * 处理删除员工操作
     * 显示确认对话框并从表格中删除用户
     * @param {Object} row - 当前操作的行数据对象
     */
    handleDelete(row) {
      // 显示确认对话框
      this.$confirm('确认删除该员工吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认后删除数据（这里是模拟，实际应调用API）
        this.tableData = this.tableData.filter(item => item.id !== row.id)
        this.$message.success('删除成功')
      }).catch(() => {
        // 用户取消操作，不做任何处理
      })
    },
    
    /**
     * 处理每页显示条数变化事件
     * 更新每页显示条数并重新加载数据
     * @param {Number} size - 新的每页条数
     */
    handleSizeChange(size) {
      this.pagination.pageSize = size // 更新每页条数
      this.getEmployeeList() // 重新加载数据
    },
    
    /**
     * 处理页码变化事件
     * 更新当前页码并重新加载数据
     * @param {Number} page - 新的页码
     */
    handleCurrentChange(page) {
      this.pagination.currentPage = page // 更新当前页码
      this.getEmployeeList() // 重新加载数据
    }
    
  }
}
</script>

<style>
/* 用户管理容器：设置基本布局和样式 */
.user-management-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: hidden;
}

/* 搜索容器：设置搜索区域的背景、边距和圆角 */
.search-container {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

/* 搜索输入框：设置宽度和外边距 */
.search-input {
  width: 240px;
  margin-right: 10px;
}

/* 操作按钮容器：设置底部外边距 */
.operation-container {
  margin-bottom: 15px;
}

/* 表格容器：使用弹性布局自动填充剩余空间 */
.table-container {
  flex: 1;
  min-height: 500px;
  width: 100%;
  overflow-x: auto; /* 允许水平滚动，处理表格过宽情况 */
}

/* 警告文本颜色：用于停用按钮 */
.warning-text {
  color: #E6A23C;
}

/* 成功文本颜色：用于启用按钮 */
.success-text {
  color: #67C23A;
}

/* 分页容器：设置顶部外边距和对齐方式 */
.pagination-container {
  margin-top: 15px;
  padding: 10px 0;
  text-align: right;
  background-color: #fff;
}

/* 表头样式：设置内边距和背景色 */
.el-table th {
  padding: 12px 0;
  background-color: #f5f7fa !important;
}

/* 表头容器样式：添加底部边框 */
.el-table__header-wrapper {
  border-bottom: 1px solid #ebeef5;
}

/* 对话框内容样式：设置内边距 */
.el-dialog__body {
  padding: 20px 30px;
}
</style>